<!--  @author:ymy  -->
<template>
  <div class="fieldsTabs" @scroll="scrollEvent">
    <div class="filter-box-sym" @click="filterSearch">
      <h3></h3>
      <div class="item-list" @click="selectSort">
        <span :class="{ active: sort == 2 }">综合</span>
        <span :class="{ active: sort == 1 }">最新</span>
        <span :class="{ active: sort == 3 }">最热</span>
      </div>
      <div class="item-more">全部<van-icon name="arrow-down" /></div>
    </div>
    <div class="content" @scroll="scrollEvent">
      <div class="content-item" v-for="item in pickList" :key="item.id">
        <div class="item-img">
          <img :src="'https://ss.lanqb.com/' + item.posters.app" alt="" />
        </div>
        <div class="item-right">
          <div class="item-text">
            <h3>{{ item.title }}</h3>
            <div class="item-userinfo">
              <div class="user">
                <img :src="'https://ss.lanqb.com/' + item.profile.avatar" alt="" />
                <p>{{ item.profile.nickname }}</p>
              </div>
              <p>共{{ item.preview_setting.lessons_count }}节</p>
            </div>
          </div>
          <div class="item-text1">
            <span>{{ item.study_num }}人在学</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Tabs',
  data() {
    return {
      sort: 2,
      pickList: [],
      curPage: 1,
    };
  },
  async created() {
    this.curPage = 1;
    const { data } = await this.axiosRq(
      `/lqb/api/course/video?course_fields_ids=${this.$route.meta.courseFieldsIds}&type=2&limit=8&page=1`,
      'GET'
    );
    this.pickList = data;
  },
  methods: {
    filterSearch(e) {
      if (e.target.nodeName === 'SPAN') {
        this.curPage = 1;
        this.pickList = [];
        let cfId = this.$route.meta.courseFieldsIds;
        this.loadMoreGet(
          `/lqb/api/course/video?course_fields_ids=${cfId}&type=${this.sort}&limit=8&page=${this.curPage}`
        ).then(({ data }) => {
          this.pickList = data;
        });
      }
    },
    selectSort(e) {
      let nodename = e.target.innerText;
      if (nodename === '综合') {
        this.sort = 2;
      } else if (nodename === '最新') {
        this.sort = 1;
      } else {
        this.sort = 3;
      }
    },
    scrollEvent(e) {
      const st = e.target.scrollTop;
      const totalHeight = e.target.scrollHeight;
      const clientHeight = e.target.clientHeight;
      if (st + clientHeight >= totalHeight) {
        this.curPage++;
        // /api/course/video?course_fields_ids=8&type=2&limit=8&page=1
        let cfId = this.$route.meta.courseFieldsIds;
        this.loadMoreGet(
          `/lqb/api/course/video?course_fields_ids=${cfId}&type=${this.sort}&limit=8&page=${this.curPage}`
        ).then(({ data }) => {
          this.pickList = this.pickList.concat(data);
        });
      }
    },
    async loadMoreGet(url) {
      const response = await this.axiosRq(url, 'GET');
      return response;
    },
  },
  watch: {
    $route: {
      handler(val) {
        this.curPage = 1;
        this.pickList = [];
        let cfId = val.meta.courseFieldsIds;
        this.loadMoreGet(
          `/lqb/api/course/video?course_fields_ids=${cfId}&type=${this.sort}&limit=8&page=${this.curPage}`
        ).then(({ data }) => {
          this.pickList = data;
        });
      },
    },
  },
};
</script>

<style lang="less" scoped>
html {
  overflow: hidden;
}
.fieldsTabs {
  height: 5.09rem;
  overflow: auto;
  > .filter-box-sym {
    display: flex;
    margin-top: 0.04rem;
    height: 0.27rem;
    position: relative;
    h3 {
      display: inline-block;
      font-size: 0.14rem;
      margin-right: 0.09rem;
      margin-bottom: 0.08rem;
      flex-shrink: 0;
    }
    > .item-list {
      display: flex;
      flex-wrap: nowrap;
      overflow: auto;
      text-align: center;
      height: 0.27rem;
      line-height: 0.27rem;
      span {
        flex-shrink: 0;
        display: inline-block;
        height: 0.19rem;
        line-height: 0.19rem;
        font-size: 14px;
        margin: 0 0.07rem 0.08rem 0.07rem;
      }
    }
    > .item-more {
      position: absolute;
      top: 0;
      right: 0;
      font-size: 0.14rem;
      color: #1c9fea;
    }
  }
  .active {
    color: #1c9fea;
  }
  > .content {
    > .content-item {
      width: 3.43rem;
      height: 1.125rem;
      display: flex;
      justify-content: space-between;
      margin: 0.16rem auto 0;
      > .item-img {
        img {
          width: 1.5rem;
          height: 1.125rem;
        }
      }
      > .item-right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 0.12rem;
        > .item-text {
          h3 {
            font-size: 0.14rem;
            font-weight: normal;
          }
          > .item-userinfo {
            margin-top: 0.08rem;
            display: flex;
            height: 0.18rem;
            line-height: 0.18rem;
            justify-content: space-between;
            font-size: 0.13rem;
            vertical-align: middle;
            > .user {
              img {
                width: 0.18rem;
                height: 0.18rem;
                border-radius: 50%;
                vertical-align: middle;
              }
              p {
                display: inline-block;
                height: 18px;
                line-height: 0.18rem;
                font-size: 0.13rem;
              }
            }
          }
        }
        > .item-text1 {
          span {
            font-size: 0.13rem;
            color: #8c8c8c;
          }
        }
      }
    }
  }
}
</style>
